<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="com.lp.cfg.ProConfig" %>
<!DOCTYPE html>
<html>
<head>
	<%@ include  file="/WEB-INF/oss/base/common/variable.jsp"%>
    <%@ include  file="/WEB-INF/oss/base/common/resource_lib.jsp"%>
    <%@ include  file="/WEB-INF/oss/base/common/variable_js.jsp"%>
	<style type="text/css">
		.self-base-icon{
			padding: 0 10px;
			font-size: 14px;
			cursor: pointer;
		}
		.self-base-icon:HOVER {
			color: #00aaee;
		}
		.span-name{
			display: inline-block;
			width: 70px;
			
		}
	</style>
</head>
<body>
	<div class="app-container">
		<div class="search-condition" type-option="search_table" config-option=" 'submit':'#searchbtns',
															'table':'#init-table' ">
				
				<input type-name="name" placeholder="Name query" id="sub-name-alias" style="width: 100px;" class="input input-auto" />
				
				<button id="searchbtns" class="button ml-20 bg-sub"><span class="icon-search"></span> inquire</button>
				<button type-option="button" class="button ml-10 bg-sub" 
				config-option="'type':'window','title':'Increase LPM','selector':'#add','width':'460px','before':'beforeFunc' " ><span class="icon-plus"></span> Increase LPM</button>
		</div>
		
		 <div>
			<div id="init-table" type-option="table" config-option="'url':'/page/lpm',
						'param':{ },
						'columns':[
							{'name':'Serial number','type':'seq','value':'seq','width':'8%'}, 
							{'name':'Name','value':'name','width':'10%'}, 
							{'name':'IP','value':'ip','width':'15%'}, 
							{'name':'PORT','value':'port','width':'10%'},
							{'name':'LPM-KEY','type':'value','value':'lpm_key','width':'16%'}, 
							{'name':'Controls','type':'self','value_callback':'value_function','width':'18%'}]" > 
			
			</div>
		</div> 
	</div>
	
	<div style="display:none;padding:20px;" id="add" 
		type-option="form_submit" config-option=" 'url':'/lpm',
												  'submit':'#add-Btn',
												  'success':'sunccessReturn',
												  'validate':{ 'tigger':'focusout,submit','style':'color,pop'} ">
		<div>
			<span class="span-name">Name:</span> 
			<input validate="empty" type-name="name" style="width: 340px;" placeholder="Please enter name" class="input input-auto"/>
		</div>
		<div style="margin-top: 10px;">
			<span class="span-name">IP:</span> 
			<input validate="empty" type-name="ip" style="width: 340px;" placeholder="Please enter ip" class="input input-auto" />		
		</div>
		<div style="margin-top: 10px;">
			<span class="span-name">PORT:</span> 
			<input type-name="port" validate="empty" style="width: 340px;" placeholder="Please enter port" class="input input-auto" />		
		</div>
		<div style="margin-top: 10px;">
			<span class="span-name">LPM-KEY:</span> 
			<input type-name="lpm_key" placeholder="Please enter LPM KEY" style="width: 340px;" class="input input-auto" />		
		</div>
		<div style="margin-top: 10px;">
			<button id="add-Btn" class="button button-small" >Save</button>	
		</div>
	</div>
	
	<div style="display:none;padding:20px;" id ="table-detail-info"  
				type-option="form_submit" config-option=" 'url':'/lpm',
														  'method':'PUT',
														  'submit':'#update_btn',
														  'success':'sunccessReturn',
														  'validate':{ 'tigger':'focusout,submit','style':'color,pop'}"  >
		<div id="detail_get" config-option=" url:'/lpm?id=$#init-id$' ">
			<input type-name="id" id="init-id" type="hidden" />	
			<div>
				<span class="span-name">Name:</span> 
				<input validate="empty" type-name="name" style="width: 340px;" placeholder="Please enter name" class="input input-auto"/>
			</div>
			<div style="margin-top: 10px;">
				<span class="span-name">IP:</span> 
				<input validate="empty" type-name="ip" style="width: 340px;" placeholder="Please enter ip" class="input input-auto" />		
			</div>
			<div style="margin-top: 10px;">
				<span class="span-name">PORT:</span> 
				<input type-name="port" validate="empty" style="width: 340px;" placeholder="Please enter port" class="input input-auto" />		
			</div>
			<div style="margin-top: 10px;">
				<span class="span-name">LPM-KEY:</span> 
				<input type-name="lpm_key" placeholder="Please enter LPM KEY" style="width: 340px;" class="input input-auto" />		
			</div>
			<div style="margin-top: 10px;">
				<button id="update_btn" class="button button-small" >Save</button>	
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
function value_function(data,seq){
	return "<span tag='Editor' onclick='t_edit(this,"+data.id+")' class='self-base-icon icon-edit'>Editor</span>"+
    "<span tag='Delete' onclick='t_delete(this,"+data.id+")' class='self-base-icon icon-bitbucket'>Delete</span>";
}
function beforeFunc(){
	
}
function sunccessReturn(data){
	if( data.status == status_code.OK ){
 		tip("Successful");
 		setTimeout(function(){
 			closeAll();
 			$("#init-table").tableAdaptor();
 		},1000)
	}else{
		tip(data.statusMsg);
	}
}
function t_edit(obj,id){
	writeVal("init-id",id);
	openWindow("Editor LPM","#table-detail-info","460px");
	manual_init_detail_get($("#detail_get"));
}
function t_delete(obj,id){
	lcomfirm('Are you sure to delete the LPM?',function(){
		commonAjax("DELETE",localUrl+"/lpm?id="+id, "",function(){
			tip("Successfully deleted");
			setTimeout(function(){
				closeAll();
				$("#init-table").tableAdaptor();
			},1000)
		});
	});
}

</script>
</html>